<template>
  <div>
    <a-layout id="components-layout-demo-top-side-2">
      <IndexHeader></IndexHeader>
      <a-layout>
        <a-col :span="4">
          <Menu @showContent="testMain"></Menu>
        </a-col>
        <div></div>
        <a-col :span="20">
          <a-layout style="padding: 0 24px 24px">
            <a-layout-content
                :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
            >
              <router-view></router-view>
            </a-layout-content>
          </a-layout>
        </a-col>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import Menu from "@/components/Menu";
import IndexHeader from "@/components/IndexHeader";

export default {
  name: "Index",
  data() {
    return {
      collapsed: false,
    };
  },
  components: {
     Menu, IndexHeader
  },
  methods: {
    testMain(path) {
      this.$router.push(path).catch(() => {
        console.log('重复点击了同一跳转按钮');
      })
    }
  }
};
</script>

<style scoped>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>